<template>
    <div class="mt-20">
        <v-title title="票据库存">
            <p class="date">查看更多库存
                <i class="iconfont icon-chakangengduo" @click="$router.push('/transaction/inventory')"></i>
            </p>
        </v-title>
        <div class="dfr">
            <div class="item">
                <p>库存票据</p>
                <h5>{{inventory.inventoryBill}}张 {{inventory.inventoryBillVlaue}}万元</h5>
            </div>
            <div class="item">
                <p>近30天到期票据</p>
                <h5>{{inventory.nearBill}}张 {{inventory.nearBillVlaue}}万元</h5>
            </div>
            <div class="item">
                <p>交易中票据</p>
                <h5>{{inventory.txnBill}}张 {{inventory.txnBillVlaue}}万元</h5>
            </div>
        </div>
        <!--{{inventory}}-->
    </div>
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator'
  import vTitle from '../home-title'
  import vPrivateItem from '../private-item'

  @Component({
    components: {
      vTitle, vPrivateItem
    }
  })
  export default class Store extends Vue {
    @Prop({
      default: () => {}
    }) inventory

    refresh () {
      this.$emit('refresh')
    }
  }
</script>

<style lang="less" scoped>
    .title {
        font-size: 20px;
        color: #666;
        margin: 20px auto 40px;
        padding-left: 20px;
    }

    .date {
        color: #999;
        font-size: 14px;
    }

    .dfr {
        width: 90%;
        margin: 0 auto;
        justify-content: space-between;
    }

    .item {
        width: 250px;
        p {
            color: #999;
            height: 40px;
            line-height: 40px;
        }
        h4 {
            font-size: 24px;
        }
    }

    .iconfont {
        font-size: 20px;
        cursor: pointer;
    }

    .mt-20 {
        padding-bottom: 20px;
    }
</style>
